<template>
    <div>
        <h2>我是about的子组件</h2>
        <h5>下面是父组件传递给我的值：</h5>
        <div>{{ obj }}</div>
        <div>{{ obj.list }}</div>
        <div>{{ radioList }}</div>
        <h5>
            <el-button type="success" @click="handleClickOne">点我给父组件传值1</el-button>
            <el-button type="success" @click="handleClickTwo">点我给父组件传值2</el-button>
        </h5>
        <br>
        <h2>使用公交总线bus（mitt）传值</h2>
        <button @click="sendMessage">Send Message</button>
        <el-dialog v-model="dialogFormVisible">
            <template #header="{ close, titleId, titleClass }">
                <div class="my-header">
                    <h4 :id="titleId" :class="titleClass" class="tips">{{ addUpdateFrom.id == '0' ? '新增' : '编辑' }}</h4>
                    <!-- <el-button type="danger" @click="close">
                        <el-icon class="el-icon--left">
                            <CircleCloseFilled />
                        </el-icon>
                        Close
                    </el-button> -->
                </div>
            </template>
            <el-form :model="addUpdateFrom" ref="ruleFormRef" :rules="rules">
                <el-form-item label="Promotion name" :label-width="formLabelWidth" prop="ranking">
                    <el-input v-model="addUpdateFrom.ranking" autocomplete="off" />
                </el-form-item>
                <el-form-item label="Zones" :label-width="formLabelWidth" prop="flag">
                    <el-select v-model="addUpdateFrom.flag" placeholder="Please select a zone" clearable>
                        <el-option label="开启" value="1" />
                        <el-option label="关闭" value="0" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="handlerSub()">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick ,watch,onUnmounted} from "vue";
import EventBus from '@/untils/eventBus.js';
import { ElTable, ElTableColumn, ElButton, ElSelect, ElDialog } from 'element-plus';
import { CircleCloseFilled } from '@element-plus/icons-vue'
// let data = reactive({
//     addUpdateFrom: {
//         ranking: '0',
//         time: "",
//         names: "",
//         arithmetic: "",
//         flag: ""
//     }
// })
let addUpdateFrom = ref({
    id: 0,
    ranking: '',
    time: "",
    names: "",
    arithmetic: "",
    flag: ""
})
let ruleFormRef = ref();
const rules = {
    ranking: [
        { required: true, trigger: 'blur', message: '品牌名称不能为空' }
    ],
    flag: [
        { required: true, trigger: 'change', message: 'Zones不能为空' }
    ],
}
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const emit = defineEmits(["myClick", "twoClick"]);
import request from "@/untils/request1";
const props = defineProps(['obj', 'radioList', '传的第三个值'])
console.log("props==", props);
const handleClickOne = () => {
    // 触发父组件中的方法，并把值以参数的形式传过去
    // 这里触发的方法名要和父组件中@符后面的名称一样
    emit("myClick", "子组件向父组件传送的信息");//传递给父组件函数和数据
}
const handleClickTwo = () => {
    // 触发父组件中的方法，并把值以参数的形式传过去
    // 这里触发的方法名要和父组件中@符后面的名称一样
    emit("twoClick", "点我给父组件传值2");//传递给父组件函数和数据
}
const init = () => {
    alert('111')
}
watch(dialogFormVisible, (newV, oldV) => {
    if (newV == false) {
        ruleFormRef.value.resetFields();//重置该表单项，将其值重置为初始值，并移除校验结果
    }
})
const initTwo = (obj) => {
    console.log("obj-----", obj);
    dialogFormVisible.value = true;
    if (obj == undefined) {
        console.log("新增");
        // addUpdateFrom.value.id = 0;
        // addUpdateFrom.value.ranking = '';
        // addUpdateFrom.value.time = '';
        // addUpdateFrom.value.names = '';
        // addUpdateFrom.value.arithmetic = '';
        // addUpdateFrom.value.flag = '';
    } else {
        console.log("编辑");
        addUpdateFrom.value = JSON.parse(JSON.stringify(obj))
        console.log("-------", addUpdateFrom.value);
    }

}
//确认
const handlerSub = async () => {
    console.log("addUpdateFrom.value.id===", addUpdateFrom.value.id ? '编辑' : '新增');
    let data = {
        id: addUpdateFrom.value.id || undefined, //id
        ranking: addUpdateFrom.value.ranking,
        time: addUpdateFrom.value.time,
        names: addUpdateFrom.value.names,
        arithmetic: addUpdateFrom.value.arithmetic,
        flag: addUpdateFrom.value.flag,
    };
    await ruleFormRef.value.validate((valid) => {
        if (valid) {
            console.log('submit!',data)
            dialogFormVisible.value = false;
            emit("updateClick", data);//传递给父组件函数和数据
        } else {
            console.log('error submit!')
        }
    })
}
//使用 defineExpose 向外暴露指定的数据和方法
defineExpose({
    init,
    initTwo
})
const sendMessage = () => {
  EventBus.emit('message-event', 'Hello from Component A!');
}
</script>
<style scoped>
.my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.tips {
    font-size: 18px;
}

.tips::after {
    content: "";
    width: 5px;
    height: 30px;
    position: absolute;
    top: 16px;
    left: 8px;
    border-radius: 50px;
    background: rgb(0, 102, 239);
}
</style>